Colores #

El esquema de colores que confecciona un tema visual viene definido a través de variables scss.

Si no quiere cambiar colores y usar el tema base de color azul, no tiene que hacer nada, ya que viene el tema básico viene incluido en el framework y solo tiene que importar su css en el archivo angular.json.

Si quiere cambiar los colores del tema, su proyecto angular tiene que estar configurado con soporte para sass.

Cree un archivo en su cliente en src/themes/theme.scss, por ejemplo, con estas variables sobreescritas:

@forward 'theme.forward' with (
  $aocPrimaryColor: #dfdfec,
  $aocPrimaryLightColor: #f6f6f9,
  $aocPrimaryDarkColor: #b6b6d3,
  $aocPrimaryAccentColor: #ffcaa8,
  $aocInputFocusBorderColor: #ffaa00,
  $aocInputFocusBoxShadowColor: #ffd980,
  $aocAppBackgroundColor: #fefeff
);

Añádalo en su archivo angular.json, en styles en primera posición.

Cree otro archivo llamado src/themes/theme.forward.scss, este archivo carga las variables y luego carga todo el código scss del framework:

@forward "../../node_modules/@atlantis-of-code/aoc-client/aoc-design/misc/variables/variables";
@use 'sass:meta';
@include meta.load-css("../../node_modules/@atlantis-of-code/aoc-client/aoc-design/aoc.scss");

Ejemplo #

Ejemplo completo en quest-cliente/src/theme